<template>
  <view>
    <!-- 顶部Tab 开始 -->
    <view class="tabs_title">
      <view
        :class="['tabs_item', [activeTabIndex == index ? 'active' : '']]"
        v-for="(item, index) in ['全部', '待付款', '待发货', '退款/退货']"
        :key="index"
        @tap="handleItemChange(index)"
      >
        {{ item }}
      </view>
    </view>
    <!-- 顶部Tab 结束 -->
    <!-- 商品列表 开始 -->
    <scroll-view class="orders" scroll-y="true" lower-threshold="50" @scrolltolower="getGoodsList">
      <view class="order" v-for="(item, index) in orders" :key="item.order_id">
        <view class="order_number">
          <view class="">订单编号</view>
          <view class="">{{ item.order_number }}</view>
        </view>
        <view class="order_price">
          <view class="">订单价格</view>
          <view class="price">¥{{ item.order_price }}</view>
        </view>
        <view class="create_time">
          <view class="">订单日期</view>
          <view class="">{{ item.create_time_str }}</view>
        </view>
      </view>
    </scroll-view>
    <!-- 商品列表 结束 -->
  </view>
</template>

<script>
import regeneratorRuntime from '../../lib/runtime/runtime.js';
import { request } from '../../request/request.js';
export default {
  onLoad(data) {
    var _me = this;
    // console.log(data);
    _me.activeTabIndex = data.type - 1;
    // _me.getOrdersInfo();
  },
  onShow() {
    var _me = this;
    _me.getOrdersInfo();
  },
  data() {
    return {
      activeTabIndex: 0,
      orders: []
    };
  },
  methods: {
    handleItemChange: function(index) {
      var _me = this;
      _me.activeTabIndex = index;
      _me.getOrdersInfo();
    },
    async getOrdersInfo() {
      var _me = this;
      if (uni.getStorageSync('token') != '') {
        // 有token
        try {
          var res = await request({
            url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all',
            data: {
              type: _me.activeTabIndex + 1
            }
          });
          console.log(res);
          _me.orders = res.data.message.orders;
          _me.orders.forEach(function(item) {
            item.create_time_str = new Date(item.create_time * 1000).toLocaleString();
          });
        } catch (error) {
          //TODO handle the exception
          console.log(error);
        }
      } else {
        // 没有token
        uni.navigateTo({
          url: '../auth/auth'
        });
      }
    }
  }
};
</script>

<style lang="scss">
/* 顶部Tab 开始 */
.tabs_title {
  display: flex;
  height: 90rpx;
  .tabs_item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    &.active {
      border-bottom: 2rpx solid red;
    }
  }
}
/* 顶部Tab 结束 */
/* 商品列表 开始 */
scroll-view.orders {
  width: 100%;
  height: calc(100vh - var(--window-top) - 90rpx);
  .order {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    font-size: 32rpx;
    color: #666666;
    border: {
      top: 2rpx solid #666666;
      bottom: 2rpx solid #666666;
    }
    margin-top: -2rpx;
    .order_number {
      display: flex;
      justify-content: space-between;
    }
    .order_price {
      display: flex;
      justify-content: space-between;
      .price {
        color: $themeColor;
      }
    }
    .create_time {
      display: flex;
      justify-content: space-between;
    }
  }
}
/* 商品列表 结束 */
</style>
